Consume endpoint #895
Consume endpoint #895
Conversation
Implements a complete QR code scanning system for validating and consuming event tickets: Features: - QR code scanner component using @zxing/library - Event-specific scan pages at /events/[slug]/scan - Consumable detail view with validation status - Admin QR code management page at /admin/qr - Ticket consumption tracking and history - Support for scanning from inventory page Changes: - Add QRCodeScanner.svelte component with camera access - Add useQRScanner hook for QR code detection - Add consumable.ts server utilities for ticket consumption - Add scan routes for events with ticket validation - Add consume action to mark tickets as used - Add QR code admin page to routes - Filter events with tickets in event listing - Update translations for scanning UI - Add @zxing/library dependency The system validates tickets against the event, checks consumption status, displays owner information, and shows question responses if available.
There was a problem hiding this comment.
Pull Request Overview
This PR implements a comprehensive QR code ticket scanning system for events, allowing administrators to validate and consume tickets via QR codes. Users can generate QR codes for their tickets, and administrators can scan these codes to validate and consume tickets for specific events.
Key changes include:
- Server-side ticket consumption logic with validation
- QR code scanning interface for event administrators
- Client-side QR scanner component using ZXing library
- Comprehensive ticket validation UI showing status, owner, and event details
Reviewed Changes
Copilot reviewed 20 out of 21 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/translations/sv.json, src/translations/en.json | Added translation strings for QR scanning functionality |
| src/routes/routes.ts | Added QR Code admin route with webshop management access |
| src/routes/(app)/shop/tickets/[slug]/manage/+page.svelte | Added TODO comment for dynamic text |
| src/routes/(app)/shop/tickets/[slug]/manage/+page.server.ts | Refactored consume action to use shared consumable service |
| src/routes/(app)/shop/inventory/[id]/consume/+page.* | Added direct ticket consumption endpoint |
| src/routes/(app)/events/[slug]/scan/[consumable]/+page.* | Added detailed ticket validation and consumption interface |
| src/routes/(app)/events/[slug]/scan/+page.* | Added QR scanner page for events |
| src/routes/(app)/events/[slug]/+page.* | Added QR scanner button for authorized users |
| src/routes/(app)/admin/qr/+page.* | Added admin QR scanner event selection interface |
| src/lib/server/shop/consumable.ts | Created shared ticket consumption service |
| src/lib/hooks/useQRScanner.ts | Added QR scanner hook using ZXing library |
| src/lib/components/shop/inventory/InventoryItemPage.svelte | Fixed QR code data to use consumable ID |
| src/lib/components/QRCodeScanner.svelte | Added QR scanner component |
| package.json | Added ZXing library dependency |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| <h1 class="text-2xl">{ticket.title}</h1> | ||
|
|
||
| <a href="edit" class="btn btn-secondary">Redigera biljett</a> | ||
| <!-- TODO: Add dynamic text --> |
There was a problem hiding this comment.
This TODO comment lacks context about what dynamic text should be added. Consider providing more specific details about the intended functionality.
| <!-- TODO: Add dynamic text --> | |
| <!-- TODO: Show ticket status or additional dynamic info here --> |
| export const consumeConsumable = async ( | ||
| prisma: PrismaClient, | ||
| consumableId: string, | ||
| ): Promise<Message> => { |
There was a problem hiding this comment.
The Message type is not imported or defined in this file. This will cause a TypeScript compilation error.
| import Price from "$lib/components/Price.svelte"; | ||
| import type { InventoryItemLoadData } from "$lib/server/shop/inventory/getInventory"; | ||
| import type { page } from "$app/stores"; | ||
| import { page } from "$app/stores"; |
There was a problem hiding this comment.
The page import is added but doesn't appear to be used in the visible code changes. Consider removing unused imports unless they're used elsewhere in the file.
| import { page } from "$app/stores"; |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
fgren
left a comment
fgren
left a comment
There was a problem hiding this comment.
Additional feedback:
- Camera issues in Firefox
- Unhandled error on bad QR codes
|
This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 14 days. |
fgren
left a comment
fgren
left a comment
There was a problem hiding this comment.
Looks good! Have tested again and errors are handled correctly. The QR scanning works in Chrome, but not in Firefox. (but I think it can be merged anyway?)
|
I couldn't replicate it not working in firefox (or any other browser). I think it's fine as long as we show an error, to me it seems plausible that it has to do with browser configuration rather than the code.
… On 15 Jan 2026, at 12:03, Felix Ohrgren ***@***.***> wrote:
@fgren approved this pull request.
Looks good! Have tested again and errors are handled correctly. The QR scanning works in Chrome, but not in Firefox. (but I think it can be merged anyway?)
—
Reply to this email directly, view it on GitHub <#895 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APBTCE64NFRMPDRNCTI43JD4G5XZDAVCNFSM6AAAAACIN5WQ4KVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTMNRVGA3TOOBUGY>.
You are receiving this because you authored the thread.
|
Adds the ability to scan tickets via qr codes, and validating them server side.
Users get a qr code:
URL: /shop/inventory/{ticket_id}
Admin can consume the ticket:
URL: /events/{event_slug}/scan/{ticket_id}
New QR Code option under the admin tab:
Closes #716